<template>
  <div class="supplier-list">
      <!-- <el-row :gutter="16" style="line-height:40px"> -->
        <!-- <el-col :span="1">
          <div class="label-wrap category">
            <label for="">编号：</label>
          </div>
        </el-col>
        <el-col :span="3">
          <el-input v-model="categoryNumber" size="small" placeholder="请输入编号" style="width:100%"></el-input>
        </el-col>

        <el-col :span="1">
          <div class="label-wrap category">
            <label for="">名称：</label>
          </div>
        </el-col>
        <el-col :span="4">
          <el-input v-model="categoryName" size="small" placeholder="请输入名称" style="width:100%"></el-input>
        </el-col>

        <el-col :span="2">
          <el-button type="primary" size="mini" icon="el-icon-search" style="width:80px" @click="searchProdCate">搜索</el-button>
        </el-col> -->

        <!-- <el-col :span="13">
          <el-button type="primary" size="mini" 
          style="width:100px;" icon="el-icon-plus" @click="addCategory">新增类别</el-button>
        </el-col> -->
      <!-- </el-row> -->

      <!-- <div class="autospace"></div> -->

      <el-row :gutter="20" v-loading="loading">

        <el-col :xs="24" :sm="16" :md="12" :lg="7" :xl="7">
          <div class="tree-store">
                <div class="store-category">
                    <!-- 一级分类 -->
                    <div class="first-category" @click="openFirstCate()">
                        <i :class="[openProdCate? 'el-icon-arrow-down':'el-icon-arrow-right']"></i>
                        <span class="category-name">全部类别</span>
                    </div>
                    <!-- 二级分类 -->
                    <transition>
                      <ul v-if="openProdCate" name="areawrap">
                          <li v-for="item in productCategorylist" :key="item.categoryId">
                              <i @click="openTwoCate(item.categoryId)" :class="[firstActive.indexOf(item.categoryId) != -1? 'el-icon-arrow-down':'el-icon-arrow-right']"></i>
                              <span @click="openTwoCate(item.categoryId)" class="category-name">{{item.categoryName}}</span>
                              <span>
                                <el-button style="margin-left:30px;height:24px;line-height:0px;border:0" 
                                  size="mini" icon="el-icon-plus" @click="addTwoCate(item.categoryId)"
                                  v-if="firstActive.indexOf(item.categoryId) != -1">
                                  添加二级分类
                                </el-button>
                              </span>

                              <ul v-if="firstActive.indexOf(item.categoryId) != -1">
                                  <li v-for="twoitem in item.categoryTwos" :key="twoitem.categoryTwoId"
                                      @mouseover="viewBtn(twoitem)" @mouseleave="unviewbtn">
                                      <span style="margin-left:-10px" @click="clickTwoCate(twoitem.categoryTwoId)" class="depart-name">{{twoitem.categoryTwoName}}</span>
                                      <div v-if="viewbtnvis == twoitem.categoryTwoId" class="depart-btn">
                                        <el-button size="mini" icon="el-icon-edit" @click="editTwoCate(twoitem)">修改</el-button>
                                        <el-button size="mini" icon="el-icon-delete" @click="delTwoCate(twoitem.categoryTwoId)">删除</el-button>
                                      </div>
                                  </li>
                              </ul>
                          </li>
                      </ul>
                    </transition>                    
                </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17" v-loading="loading" v-if="!viewProdvis">
         
          <el-button type="primary" size="mini" 
          style="width:100px;margin-bottom:20px" icon="el-icon-plus" @click="addCategory">新增类别</el-button>
        
          <el-table :data="productCategorylist" border style="width: 100%">
            <el-table-column prop="categoryNumber" label="类别编号"></el-table-column>
            <el-table-column prop="categoryName" label="类别名称"></el-table-column>
            <el-table-column prop="categoryRemark" label="备注"></el-table-column>
            <el-table-column prop="categoryTime" label="创建时间"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope" v-if="!viewProdvis">
                <el-button size="mini" icon="el-icon-edit" @click="editProtCate(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="delproductCate(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

        <el-col :span="17" v-if="viewProdvis">
          <el-table :data="prodsbyCate" border style="width: 100%">
           <el-table-column label="装备图片" width="80">
              <template slot-scope="scope" v-if="viewProdvis">
                <div>
                  <img style="width:50px;height:50px;margin-top:5px" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="prodName" label="装备名称"></el-table-column>
            <el-table-column prop="prodCode" label="装备编号"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格"></el-table-column>
            <el-table-column prop="emit" label="单位"></el-table-column>
            <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
            <!-- <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-edit" @click="detailed(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="deleteItem(scope.row)">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </el-col>

      </el-row>

    <addprodcate :addTwoId='addTwoId' :checkCategory="checkCategory" :addproductCate.sync="addproductCate"></addprodcate>
    <addtwocate :categoryId='categoryId' :checkCategory="checkCategory" :addtwoDialog.sync="addtwoDialog"></addtwocate>
  </div>
</template>

<script>
import { GetAllProdCate, DelProdCate, SearchProdCate, GetProdsByCate, DelProdTwoCate } from '@/api/prod';
import addprodcate from '@/views/info/addprodcate';
import addtwocate from '@/views/info/addtwocate';
export default {
  name: 'supplier',
  components: {
      addprodcate,
      addtwocate
  },
  data() {
    return {
        loading: true,
        categoryName: '',
        categoryNumber: '',
        addproductCate: false,
        checkCategory: {},
        openProdCate: true,
        firstActive: [],
        addTwoId: null,
        productCategorylist: [],
        prodsbyCate: [],
        viewProdvis: false,
        addtwoDialog: false, // 打开二级分类弹框
        categoryId: null, // 新增二级分类时传入一级Id
        viewbtnvis: false,
    }
    
  },
  watch: {
    addproductCate(newVal) {
      if (!newVal) {
        this.getProdCates()
      }
    },
    addtwoDialog(newVal) {
      if (!newVal) {
        this.getProdCates()
      }
    },
  },
  methods:{
    addCategory() {
      this.addproductCate = true;
      this.checkCategory = null;
    },
    delproductCate(el) {
      this.$confirm('此操作将删除当前分类, 是否继续?')
      .then( () => {
        DelProdCate(el.categoryId).then( res => {
          let data = res.data
          this.$message({
              message: data.msg,
              type: 'success'
          })
          this.getProdCates()
        })
      }).catch(() => {
        return
      })
    },
    editProtCate(data) {
        this.addproductCate = true;
        this.checkCategory = data;
    },
    // 获取所有装备分类
    getProdCates() {
      GetAllProdCate().then( res => {
        this.productCategorylist = res.data;
        this.productCategorylist.forEach( e => {
          return e.categoryTime = this.formatDate(e.categoryTime)
        })
        this.loading = false
      })
    },
    clickTwoCate(id) {
      GetProdsByCate(id).then( res => {
        this.prodsbyCate = res.data;
        this.viewProdvis = true;
      })
    },
    // 搜索装备类别
    searchProdCate() {
      let reqData = {
        categoryNumber: this.categoryNumber,
        categoryName: this.categoryName
      }
      SearchProdCate(reqData).then( res => {
        this.productCategorylist = res.data.info;
        this.productCategorylist.forEach( e => {
          return e.categoryTime = this.formatDate(e.categoryTime)
        })
      })
    },
    openFirstCate() {
      this.viewProdvis = false;
      this.openProdCate = !this.openProdCate;
    },
    openTwoCate(id) {
      if (this.firstActive.indexOf(id) == -1) {
        this.firstActive.push(id);
      } else {
        let activeid = this.firstActive.indexOf(id);
        this.firstActive.splice(activeid, 1);
      }
    },
    // 添加二级分类
    addTwoCate(id) {
      this.categoryId = id;
      this.addtwoDialog = true;
      this.checkCategory = null;
    },
    editTwoCate(item) {
      this.addtwoDialog = true;
      this.checkCategory = item;
      console.log(item)
    },
    delTwoCate(id) {
      this.$confirm('此操作将删除当前分类, 是否继续?')
      .then( () => {
        DelProdTwoCate(id).then( res => {
          let data = res.data
          this.$message({
              message: data.msg,
              type: 'success'
          })
          this.getProdCates()
        })
      }).catch(() => {
        return
      })
    },
    viewBtn(item) {
      this.viewbtnvis = item.categoryTwoId;
    },
    unviewbtn() {
      this.viewbtnvis = ''
    },
  },

  mounted() {
    this.getProdCates()
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }

  .tree-store {
      width: 100%;
      // min-height: 500px;
      border-right: 1px dashed #e0e0e0;
      color: #333;
  }
  .store-category {
    line-height: 30px;
    position: relative;
    cursor: pointer;
    &:first-child:before {
      top: 20px
    }
    &:last-child:before {
      bottom: 21px
    }
    &:before {
        content: '';
        position: absolute;
        left: 27px;
        top: 0;
        bottom: 0;
        width: 32px;
        // border-left: 1px dotted #000;
      }
    .first-category {
      line-height: 30px;
      padding-left: 20px;
      position: relative;
      i {
          color: #999;
          font-weight: 700;
      }
      
    }
    li {
      list-style: none;
      padding-left: 40px;
      font-size: 14px;
      position: relative;
      margin-left: 10px;
      // display: flex;
      // &:hover {
      //   .depart-btn {
      //     display: block;
      //   }
      // }
      &:before {
        content: '';
        position: absolute;
        left: 20px;
        top: 15px;
        width: 20px;
        // border-bottom: 1px dotted #000;
      }
      i {
          color: #999;
          font-weight: 700;
      }
    }
    // li,h4 {
    //   &:hover {
    //     background-color: #f3f3f3;
    //     .button-wrap {
    //       display: block;
    //     }
    //   }
    // }
  }
  .category-name {
      margin-left: 5px;
  }
  .category-name:hover {
      color: #409EFF;
  }
  .depart-name:hover {
    color: #409EFF;
  }
  .depart-btn {
    position: absolute;
    top: 0;
    right: 20px;
    button {
      height: 24px;
      line-height: 10px;
       border: 0;
    }
  }

  // .areawrap-enter-active,.areawrap-leave-active{
  //     transition: opacity 1s;
  // }
  .areawrap-enter-active{
      animation: bounce-in 2s;
  }
  .areawrap-leave-active{
      animation: bounce-in 2s reverse;
  }
  @keyframes bounce-in {
      10%{
          transform: scale(0);
      }
      50%{
          transform: scale(0.5);
      }
      100%{
          transform: scale(1);
      }
  }
  
</style>
  
